{% extends 'base_dashboard.html' %}

{% block title %}Create unlock code — {{ site_settings.institute_name }}{% endblock %}

{% block content %}
<div class="row justify-content-center">
  <div class="col-lg-7">
    <a href="{% url 'certifications:proctor_queue' %}" class="btn btn-link btn-sm mb-2">← Proctor queue</a>
    <h4 class="fw-bold mb-1">Create exam unlock code</h4>
    <p class="text-muted">
      {{ application.candidate.get_display_name }} · {{ program.title }}
    </p>

    <div class="alert alert-info border-0 small">
      Start a video call with the candidate, then generate a code and read it aloud (or paste in chat).
      They enter it on their portal to unlock the MCQ exam.
    </div>

    <div class="card border-0 shadow-sm rounded-4 mb-4">
      <div class="card-body p-4">
        <form method="post">
          {% csrf_token %}
          <div class="mb-3">
            <label class="form-label fw-semibold small">{{ form.meeting_url.label }}</label>
            {{ form.meeting_url }}
          </div>
          <div class="mb-3">
            <label class="form-label fw-semibold small">{{ form.notes.label }}</label>
            {{ form.notes }}
          </div>
          <div class="mb-3">
            <label class="form-label fw-semibold small">{{ form.hours_valid.label }}</label>
            {{ form.hours_valid }}
          </div>
          <button class="btn btn-primary w-100 fw-semibold">Generate unlock code</button>
        </form>
      </div>
    </div>

    {% if active_sessions %}
    <h6 class="fw-bold">Active unused codes</h6>
    <ul class="list-group list-group-flush mb-3">
      {% for s in active_sessions %}
      <li class="list-group-item d-flex justify-content-between">
        <span class="font-monospace fw-bold">{{ s.code }}</span>
        <a href="{% url 'certifications:proctor_session_detail' s.pk %}">View</a>
      </li>
      {% endfor %}
    </ul>
    {% endif %}
  </div>
</div>
{% endblock %}